Angular / Packages / Export as CSV
Export to CSV
-
Installation
npm install xlsx npm install file-saver -
app.module.ts
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import {FormsModule} from '@angular/forms'; import { ExcelService } from './services/excel.service'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule ], providers: [ExcelService], bootstrap: [AppComponent] }) export class AppModule { } ExcelService -
Service: excel.service.ts
import { Injectable } from '@angular/core'; import * as FileSaver from 'file-saver'; import * as XLSX from 'xlsx'; const EXCEL_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'; const EXCEL_EXTENSION = '.xlsx'; @Injectable() export class ExcelService { constructor() { } public exportAsExcelFile(json: any[], excelFileName: string): void { const myworksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(json); const myworkbook: XLSX.WorkBook = { Sheets: { 'data': myworksheet }, SheetNames: ['data'] }; const excelBuffer: any = XLSX.write(myworkbook, { bookType: 'xlsx', type: 'array' }); this.saveAsExcelFile(excelBuffer, excelFileName); } private saveAsExcelFile(buffer: any, fileName: string): void { const data: Blob = new Blob([buffer], { type: EXCEL_TYPE }); FileSaver.saveAs(data, fileName + '_exported'+ EXCEL_EXTENSION); } } -
component: app.component.ts
import { Component } from '@angular/core'; import { ExcelService } from './services/excel.service'; export class AppComponent { title = 'exportExcelInAngular'; dataOfFootballers: any = [{ playerName: 'Cristiano Ronaldo', playerCountry: 'Pourtgal', playerClub: 'Juventus' }, { playerName: 'Lionel Messi', playerCountry: 'Argentina', playerClub: 'Barcelona' }, { playerName: 'Neymar Junior', playerCountry: 'Brazil', playerClub: 'PSG' }, { playerName: 'Tonni Kroos', playerCountry: 'Germany', playerClub: 'Real Madrid' }, { playerName: 'Paul Pogba', playerCountry: 'France', playerClub: 'Manchester United' }]; constructor(private excelService:ExcelService){ } exportAsXLSX():void { this.excelService.exportAsExcelFile(this.dataOfFootballers, 'footballer_data'); } } -
in html: app.component.html
Player Name Player Country Player Club {item.playerName} {item.playerCountry} {item.playerClub}